<template>
  <div class="purse_detail">
    <div class="detail_header">
      <top-bar :barObj="barObj"/>
      <div class="icon">
        <img v-if="type=='PS'" :src="currency['PS']" alt>
        <img v-else :src="currency[lockMoney.value1]" alt>
      </div>
      <div class="name">
        <span v-if="type=='PS'">章鱼丸</span>
        <span v-else>{{lockMoney.value1}}</span>
      </div>
      <div class="total" v-if="type=='PS'">总额</div>
      <div class="number">
        <span v-if="type=='PS'">{{gold}}</span>
        <span v-else>{{lockMoney.value2}}</span>
      </div>
      <div v-if="type!='PS'" class="num">≈{{lockMoney.value2*lockMoney.value3}}章鱼丸</div>
    </div>
    <div class="detail_content">
      <div class="title">可用余额 {{lockMoney.value2}}</div>
      <ul>
        <li class="bor">
          <img style="width:24px;height:21px;" src="./img/Freezing limit.png" alt>
          <span class="name">冻结额度</span>
          <span class="txt">{{lockMoney.value4}}</span>
        </li>
        <li>
          <img style="width:21px;height:24px;" src="./img/Locking limit.png" alt>
          <span class="name">锁定额度</span>
          <span class="txt">{{lockMoney.value5}}</span>
        </li>
      </ul>
    </div>
    <p-footer :type="type" class="pfooter"/>
  </div>
</template>
<script>
import pFooter from "./com/purseFooter";
import topBar from "@/components/topBar";
import { GetLock, getUserInfo } from "../../api";
import { mapGetters } from "vuex";
import { getGuid } from "../../utils/index";
import { Toast } from "mint-ui";

export default {
  name: "purseDetail",
  data() {
    return {
      type: this.$route.params.id,
      barObj: {
        isBack: true,
        backVal: "钱包",
        title: "钱 包",
        isIcon: true
      },
      lockMoney: {},
      gold: "0"
    };
  },
  computed: {
    ...mapGetters(["currency"])
  },
  components: {
    pFooter,
    topBar
  },
  mounted() {
    this.getLockMoney();
    this.getUserData();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getLockMoney() {
      let id = localStorage.zyUserId;
      GetLock({
        ID: id,
        MC: this.$route.params.id
      }).then(res => {
        this.lockMoney = res.data.EntityList[0];
      });
    },
    getUserData() {
      let id = localStorage.zyUserId;
      getUserInfo({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          this.gold = res.data.EntityList[0].Gold;
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
          // this.$router.push("/login");
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.purse_detail {
  .detail_header {
    height: 6.39rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    padding-top: 0.7rem;
    color: #fff;
    text-align: center;

    .topBar {
      display: flex;
      text-align: center;
      justify-content: space-around;
      color: #fff;

      .bar {
        flex: 1;
        margin: 0 20px;
        font-size: 17px;
      }

      .bar:nth-child(1) {
        text-align: left;
        font-size: 15px;
      }

      .bar:nth-child(3) {
        text-align: right;
      }
    }

    .icon {
      width: 0.9rem;
      height: 0.9rem;
      margin: 30px auto 10px auto;

      img {
        width: 100%;
      }
    }

    .name {
      font-size: 27px;
    }

    .number {
      font-size: 33px;
      margin: 20px 0;
    }

    .total {
      margin: 15px auto 0 auto;
      font-size: 16px;
      opacity: 0.6;
    }

    .num {
      font-size: 16px;
      opacity: 0.7;
    }
  }

  .detail_content {
    width: 7.07rem;
    height: 4.37rem;
    background: #fff;
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
    top: -40px;
    padding-top: 37px;

    .title {
      width: 3.92rem;
      height: 0.6rem;
      line-height: 0.6rem;
      margin: 0px auto 40px auto;
      background: #1089FF;
      border-radius: 20px;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }

    ul {
      width: 6.67rem;
      margin: 0 auto;

      .bor {
        border-bottom: 1px solid #E6E6E6;
      }

      li {
        vertical-align: middle;
        line-height: 1rem;
        box-sizing: border-box;
        padding: 0 8px;

        .name {
          color: #006AEE;
          font-size: 15px;
        }

        .txt {
          float: right;
          font-size: 20px;
        }
      }
    }
  }

  .pfooter {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>

